<template>
<scroll ref="scroll"
        wrapperStyle="top: 140px; height: calc(100% - 193px);"
        :scrollbar="true"
        :pullDownRefresh="true"
        @pullingDown="onPullingDown">
  <div>
    <m-tab :showbar="showbar"></m-tab>
    <group :gutter="0">
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
      <folder :checkbox="checkbox"></folder>
    </group>
  </div>
</scroll>

</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Group } from 'vux';
import folder from '../components/folder';
import mTab from '../components/mTab';
import Scroll from '../components/scroll';

export default {
  components: {
    Group,
    folder,
    mTab,
    Scroll
  },
  data() {
    return {
      checkbox: {
        check: false
      },
      showbar: [
        'Rank',
        'Create',
        'Search'
      ]
    }
  },
  computed: {
    ...mapState({
          oHeaderShow: state => state.oHeader.show,
          headerHeight: state => state.headerHeight
    })
  },
  created() {
    this.updateMHeader({
      param: [
        [
          'category',
          'upload',
          'transferlist'
        ],
        true
      ],
      kind: [
        'tab',
        'display'
      ]
    })
    setTimeout(() => {
      this.$root.$on('click-cell', () => {
        alert('hhhh')
      })
      this.$root.$on('longtouch-cell', () => {
        this.checkbox.check = true
      })
      this.$root.$on('hide-oheader', () => {
        this.checkbox.check = false
      })
    })
  },
  mounted() {
    setTimeout(() => {
      this.setStyle()
    }, 300)
    window.onresize = () => {
      this.setStyle()
    }
  },
  methods: {
    ...mapActions([
          'updateMHeader',
          'updateHeaderHeight',
          'showOHeader'
    ]),
    setStyle() {
      const top = document.getElementById('header-row1').offsetHeight
      document.getElementById('oheader').style.height = top + 'px'
      this.updateHeaderHeight(top)
      document.getElementById('oHeader-obottom').style.display = 'block'
    },
    refresh(done) {
      setTimeout(() => {
        done()
      }, 1500)
    },
    onPullingDown() {
      // 模拟更新数据
      console.log('pulling down and load data')
      setTimeout(() => {
        this.$refs.scroll.forceUpdate()
      }, 2000)
    }
  },
  watch: {
    'checkbox.check': function(val) {
      if (val) {
        this.showOHeader(true)
      } else {
        this.showOHeader(false)
      }
    }
  },
  destroyed() {
    this.$root.$off('click-cell')
    this.$root.$off('longtouch-cell')
    this.$root.$off('hide-oheader')
    window.onresize = null
  }
}

</script>

<style>
</style>
